<!--
 * @Author: your name
 * @Date: 2021-07-18 15:00:34
 * @LastEditTime: 2021-07-18 18:16:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \geek-client-mobile\src\components\app-tabbar.vue
-->
<template>
  <div class="app-tabbar">
      <van-tabbar   route>
        <van-tabbar-item to="/" icon="home-o">
        首页
        <template #icon="props">
          <GeekIcon :name="props.active ? 'home-sel' : 'home'" />
        </template>
        </van-tabbar-item>
        <van-tabbar-item to="/question" icon="search">
        问答
        <template #icon="props">
          <GeekIcon :name="props.active ? 'qa-sel' : 'qa'" />
        </template>
        </van-tabbar-item>
        <van-tabbar-item to="/video" icon="friends-o">
        视频
        <template #icon="props">
          <GeekIcon :name="props.active ? 'video-sel' : 'video'" />
        </template>
        </van-tabbar-item>
        <van-tabbar-item to="/user" icon="setting-o">
        我的
        <template #icon="props">
          <GeekIcon :name="props.active ? 'mine-sel' : 'mine'" />
        </template>
        </van-tabbar-item>
      </van-tabbar>
  </div>
</template>
<script>
export default {
  name: 'AppTabbar'
}
</script>
<style scoped lang="less">
.van-tabbar {
  background: @geek-gray-color;
  position: static;
}
/deep/ .van-tabbar-item--active {
  color: @geek-color;
  background-color: @geek-gray-color
}
/deep/ .van-tabbar-item__icon {
  font-size: 20px;
}
/deep/ .van-tabbar-item__text {
  font-size: 10px;
}</style>
